<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <!--Includes-->
	<link href="css/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" />
	<script src="js/mobiscroll.custom-2.6.2.min.js" type="text/javascript"></script>

  
    <script type="text/javascript">
		$(function(){
			$('#demo').mobiscroll().date({
				preset: 'date', //日期
				theme: 'sense-ui', //皮肤样式
				display: 'bubble', //显示方式 
				mode: 'scroller', //日期选择模式
				dateFormat: 'yyyy-mm-dd', // 日期格式
				setText: '确定', //确认按钮名称
				cancelText: '取消',//取消按钮名籍我
				dateOrder: 'yyyy-mm-dd', //面板中日期排列格式
				dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
				endYear:2050 //结束年份
			});    
			$('#show').click(function(){
				$('#demo').mobiscroll('show'); 
				return false;
			});
			$('#clear').click(function () {
				$('#demo').val('');
				return false;
			});
		});
    </script>
</head>

<body>
	<input name="demo" id="demo" class="i-txt" />
	<a href="#" id="show" class="btn btn-blue"><span class="btn-i">Show</span></a>
	<a href="#" id="clear" class="btn btn-blue"><span class="btn-i">Clear</span></a>
</body>
</html>
